.dv-ornament-rotary-table {
  position: absolute;
  width: 1000px;
  height: 1000px;
  top: 1300px;
  left: 1420px;
}

.dv-rotary-table {
  position: absolute;

  g {
    @include dv-transform-origin(50% 50%);
  }
}

/*
 * 2D
 */
.dv-rotary-table.dv-rotary-table-2d {
  g.rotary-table-g-1 {
    @include dv-keyframes(rotary-table-g-1-2d) {
      // @formatter:off
      0%   { @include dv-transform(rotate(0deg)   scale(0.5)) }
      50%  { @include dv-transform(rotate(360deg) scale(1.2)) }
      100% { @include dv-transform(rotate(720deg) scale(0.5)) }
      // @formatter:on
    }
    @include dv-animation(rotary-table-g-1-2d 5s linear infinite)
  }

  g.rotary-table-g-2 {
    @include dv-keyframes(rotary-table-g-2-2d) {
      // @formatter:off
      0%   { @include dv-transform(rotate(0deg)) }
      100% { @include dv-transform(rotate(30deg)) }
      // @formatter:on
    }
    @include dv-animation(rotary-table-g-2-2d 5s infinite alternate)
  }

  g.rotary-table-g-3 {
    @include dv-keyframes(rotary-table-g-3-2d) {
      // @formatter:off
      0%   { @include dv-transform(rotate(0deg)) }
      100% { @include dv-transform(rotate(360deg)) }
      // @formatter:on
    }
    @include dv-animation(rotary-table-g-3-2d 10s linear infinite)
  }

  g.rotary-table-g-4 {
    @include dv-keyframes(rotary-table-g-4-2d) {
      // @formatter:off
      0%   { @include dv-transform(rotate(0deg)) }
      100% { @include dv-transform(rotate(30deg)) }
      // @formatter:on
    }
    @include dv-animation(rotary-table-g-4-2d 8s infinite alternate)
  }

  g.rotary-table-g-5 {
    @include dv-keyframes(rotary-table-g-5-2d) {
      // @formatter:off
      0%   { @include dv-transform(rotate(0deg)) }
      100% { @include dv-transform(rotate(360deg)) }
      // @formatter:on
    }
    @include dv-animation(rotary-table-g-5-2d 10s linear infinite)
  }
}

/*
 * 3D
 */
.dv-rotary-table.dv-rotary-table-3d {
  $angle: 75deg;

  g.rotary-table-g-1 {
    @include dv-keyframes(rotary-table-g-1-3d) {
      // @formatter:off
      0%   { @include dv-transform(rotateX($angle) rotateZ(0deg)   scale(0.5) translateZ(200px)   ) }
      50%  { @include dv-transform(rotateX($angle) rotateZ(360deg) scale(2) translateZ(400px)) }
      100% { @include dv-transform(rotateX($angle) rotateZ(720deg) scale(0.5) translateZ(200px)   ) }
      // @formatter:on
    }
    @include dv-animation(rotary-table-g-1-3d 4s linear infinite)
  }

  g.rotary-table-g-2 {
    @include dv-keyframes(rotary-table-g-2-3d) {
      // @formatter:off
      0%   { @include dv-transform(rotateX($angle)translateZ(300px) rotateZ(0deg)) }
      100% { @include dv-transform(rotateX($angle)translateZ(300px) rotateZ(180deg)) }
      // @formatter:on
    }
    @include dv-animation(rotary-table-g-2-3d 5s infinite alternate)
  }

  g.rotary-table-g-3 {
    @include dv-keyframes(rotary-table-g-3-3d) {
      // @formatter:off
      0%   { @include dv-transform(rotateX($angle) translateZ(200px) rotateZ(0deg)) }
      100% { @include dv-transform(rotateX($angle) translateZ(200px) rotateZ(360deg)) }
      // @formatter:on
    }
    @include dv-animation(rotary-table-g-3-3d 8s linear infinite)
  }

  g.rotary-table-g-4 {
    @include dv-keyframes(rotary-table-g-4-3d) {
      // @formatter:off
      0%   { @include dv-transform(rotateX($angle) translateZ(100px) rotateZ(0deg)  ) }
      100% { @include dv-transform(rotateX($angle) translateZ(100px) rotateZ(360deg) ) }
      // @formatter:on
    }
    @include dv-animation(rotary-table-g-4-3d 10s linear infinite)
  }

  g.rotary-table-g-5 {
    @include dv-keyframes(rotary-table-g-5-3d) {
      // @formatter:off
      0%   { @include dv-transform(rotateX($angle) rotateZ(0deg)) }
      100% { @include dv-transform(rotateX($angle) rotateZ(360deg)) }
      // @formatter:on
    }
    @include dv-animation(rotary-table-g-5-3d 5s linear infinite)
  }
}
